<template>
    <div class="main">
        <van-nav-bar title="购物车" />
        <div v-if="cartList.length">
        <ul>
            <li v-for="item in cartList" :key="item.id" style="display: flex;border-bottom: 1px solid #F1F3F6;padding: 10px 0;">
                <van-checkbox-group v-model="result" ref="checkboxGroup">
                    <van-checkbox  :name="item.id" style="margin-left: 3px;margin-top:-2px;position: absolute;" checked-color="#FA436A"></van-checkbox>
                </van-checkbox-group>   
                <div style="display: flex;align-items: center;margin-left: 5px;">
                    <img :src="item.product.image[0]" alt="" style="width: 115px;height: 115px;" @click="handleGoods(item)"><br/>
                    <div style="display: flex;flex-direction: column;margin-left: 20px;" class="cartMsg">
                        <p @click="handleGoods(item)">{{ item.product.title }}</p>
                        <p @click="handleGoods(item)">{{ item.sku.value }}</p>
                        <p @click="handleGoods(item)">￥{{ item.sku.price }}</p>
                        <van-stepper v-model="item.quantity" integer  @blur="handleAddNum(item.sku.id,item.quantity)" @change="handleAddNum(item.sku.id,item.quantity)"/>
                    </div>
                    <img @click.stop="handleDel(item.id)" src="@/assets/error.png" alt="" style="width: 15px;height: 15px;position: relative;top: -40px;right:-20px">
                </div>
            </li>
        </ul>
        </div>
        <div class="empty" v-if="token&&!cartList.length">
            <img src="@/assets/emptyCart.jpg" alt="">
            <p>
                <span>空空如也</span>
                <router-link to="/home" style="color: red;margin-left: 10px;">随便逛逛></router-link>
            </p>
        </div>
        <div class="empty" v-if="!token">
            <img src="@/assets/emptyCart.jpg" alt="">
            <p>
                <span>空空如也</span>
                <router-link to="/login" style="color: red;margin-left: 10px;">去登陆></router-link>
            </p>
        </div>
        <van-overlay :show="show">
            <div class="wrapper" @click.stop>
                    <van-loading size="24px" vertical>加载中...</van-loading>
            </div>
        </van-overlay>
        <van-submit-bar v-if="cartList.length" class="footer" :price="total" button-text="去结算" @submit="onSubmit">
            <van-checkbox checked-color="#FA436A" v-model="checked" @click="checkAll">
                <span v-if="!checked">全选</span>
                
            </van-checkbox>
            <van-button round type="info" v-if="checked" size="mini" color="#c0c4cc" 
                style="padding: 0 10px;position: absolute;left: 35px;top: 13px;" @click.stop="handleBatchDel">清空</van-button>
        </van-submit-bar>
    </div>
</template>
<script>
import {getCarts,eidtCart,delCart,updateState} from "@/api/cart"
import { del } from "vue";
export default {
   data() {
      return {
        cartList:[],
        show:false,
        checked:false,
        result: [],
        total:0,
        prices:[],
        quantity:0,
        ids:[],
      }
   },
   created(){
        if(this.cartList.length==0){
            this.show = true;
        }
        this.handleCarts();
   },
   computed:{
        token(){
            return this.$store.state.token;
        },
        totalval(){
            return  (this.prices.reduce((a,b)=>{b+=a;return b},0))*100;
        }
   },
   watch:{
    result(val){
            this.handleTotal(val)
    }
   },
   mounted(){
        setTimeout(() => {
            this.show = false;
        }, 500);
   },
   methods:{
        handleTotal(val){
            console.log(val);
            let arr = [];
            let prices = []
            val.forEach(item=>{
                let sub = this.cartList.filter((sub)=>{
                    return sub.id == item;
                })
                arr.push(sub[0]);
            })
            console.log(arr);
            if(arr.length){
                arr.forEach(item=>{
                    this.ids.push(item.id);
                    prices.push(Number(item.sku.price)*item.quantity);
                })
            }else{
                prices = []
            }
            this.total = (prices.reduce((a,b)=>{b+=a;return b},0))*100;
            if(this.result.length == this.cartList.length){
                this.checked = true
            }else{
                this.checked = false;
            }
        },
        handleCarts(){
            if(this.$store.state.token){
                getCarts().then(res=>{
                    this.cartList = res.data.data;
                    this.cartList.forEach(item=>{
                        this.result.push(item.id);
                    })
                })
            }
        },
        onSubmit(){
            if(this.result.length!=0){
                console.log(this.result);
                updateState({ids:this.result});
                this.$router.push({path:"/createOrder",query:{quantity:this.count_num,sku_id:this.skusId}});
            }else{
                this.$toast("请先选择商品")
            }
        },
        checkAll() {
            if(this.checked){
                console.log(this.prices);
                this.result = this.cartList.map(item=>{
                    return item.id
                })
            }else{
                this.result = []
            }
        },
        handleGoods(item){
            this.$router.push({path:"/product",query:{id:item.product.id,page:1}})
        },
        handleAddNum(id,num){
            eidtCart({quantity:num,sku_id:id})
            this.handleTotal(this.result);
        },
        handleDel(id){
            this.ids = [];
            this.ids.push(id);
            delCart({ids:this.ids});
            this.handleCarts();
        },
        handleBatchDel(){
            this.$dialog.confirm({
                title:"提示",
                message:"你确定要全部清空？"
            }).then(()=>{
                delCart({ids:this.result});
                this.handleCarts();
            }).catch(()=>{})
        }
   },
}
</script>
<style scoped>
    .main{
        padding-bottom: 140px;
    }
    .empty{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .empty p{
        color: #C0C4CC;
        font-size: 14px;
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        width: 120px;
        height: 120px;
        background-color: #fff;
    }
    .van-overlay{
        background-color: #fff;
    }
    .footer{
        width: 90%;
        height: 50px;
        margin: auto;
        position: fixed;
        left: 50%;
        bottom: 70px;
        transform: translate(-50%,0);
        box-shadow: 2px 0px 5px 2px rgba(0, 0, 0, .2);
        border-radius: 5px;
        background-color: hsla(0,0%,100%,.9);
    }
    .cartMsg p{
        width: 170px;
        height: 20px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        color: #303133;
    }
    .cartMsg p:nth-child(2){
        font-size: 13px;
        color: #909399;
        margin: 5px 0;
    }
    .cartMsg p:nth-child(3){
        margin-bottom: 10px;
    }
    ul li{
        width: 95%;
        margin: 0 auto;
    }
</style>
